---
title: MPAs vs. SPAs
description: "MPA(다중 페이지 애플리케이션)와 SPA(단일 페이지 애플리케이션) 아키텍처 간의 절충점을 이해하는 것은 다른 웹 프레임워크와 Astro의 차이점을 이해하는 데 핵심적인 요소입니다."
i18nReady: true
---

다중 페이지 애플리케이션(MPA)과 단일 페이지 애플리케이션(SPA) 아키텍처 간의 절충점을 이해하는 것은 Astro가 Next.js 및 Remix와 같은 다른 웹 프레임워크와 다른 점을 이해하는 데 핵심적인 요소입니다.

## 용어 설명


**다중 페이지 애플리케이션**은 여러 개의 HTML 페이지로 구성된 웹사이트로, 대부분 서버에서 렌더링됩니다. 새 페이지로 이동하면 브라우저는 서버에 새 HTML 페이지를 요청합니다. **아스트로는 MPA 프레임워크입니다.** 전통적인 MPA 프레임워크에는 Ruby on Rails, Python Django, PHP Laravel, WordPress, JoomLa, Drupal 등이 있고 Elventy나 Hugo와 같은 정적 사이트 빌더도 포함됩니다.

**단일 페이지 애플리케이션**은 사용자의 브라우저에 로드된 후 로컬에서 HTML을 렌더링하는 단일 자바스크립트 애플리케이션으로 구성된 웹사이트입니다. SPA는 서버에서 HTML을 생성할 수도 있지만, 브라우저에서 웹사이트를 자바스크립트 애플리케이션으로 실행하여 사용자가 네비게이팅할 때 새 HTML 페이지를 렌더링하는 고유한 기능을 제공합니다. Next.js, Nuxt, SvelteKit, Remix, Gatsby, Create React App은 모두 SPA 프레임워크의 예시입니다.

## Astro vs. 다른 MPA 프레임워크들

Astro는 MPA 프레임워크입니다. 하지만 Astro는 다른 MPA 프레임워크는 다릅니다. 가장 큰 차이점은 서버 언어와 런타임 언어로 모두 JavaScript를 사용한다는 점입니다. 기존 MPA 프레임워크에서는 서버에서는 Ruby, PHP 등 다른 언어를, 브라우저에서는 자바스크립트를 각각 작성해야 했습니다. Astro에서는 항상 JavaScript, HTML, CSS만 작성하면 됩니다. 이렇게 하면 서버와 클라이언트 모두에서 UI 컴포넌트(React 및 Svelte 등)를 렌더링할 수 있습니다.

그 결과 Next.js 및 기타 최신 웹 프레임워크와 매우 유사한 느낌의 개발자 환경을 제공하지만, 보다 전통적인 MPA 사이트 아키텍처의 성능 특성을 갖추고 있습니다.

## MPA vs. SPA

MPA와 SPA를 비교할 때 알아두어야 할 세 가지 주요 차이점이 있습니다.

#### 서버 렌더링 (MPA) vs. 클라이언트 렌더링 (SPA)

MPA에서는 페이지의 HTML 대부분이 서버에서 렌더링됩니다. SPA에서는 대부분의 HTML이 브라우저에서 JavaScript를 실행하여 로컬로 렌더링됩니다. 이는 사이트 동작, 성능 및 SEO에 큰 영향을 미칩니다.

브라우저에서 HTML을 렌더링하는 것이 서버에서 요청하는 것보다 더 빠른 옵션처럼 들릴 수 있습니다. 하지만 그 반대입니다. 서버 렌더링을 사용하지 않는 한 SPA는 MPA에 비해 첫 페이지 로드 속도가 지속적으로 느립니다. 이는 SPA가 페이지의 HTML을 렌더링하기 위해 브라우저에서 전체 JavaScript 애플리케이션을 다운로드, 구문 분석 및 실행해야 하기 때문입니다. 그러면 SPA는 어쨌든 서버 데이터를 가져와야 하므로 페이지 로딩이 완료될 때까지 대기 시간이 더 길어질 가능성이 높습니다.

대부분의 SPA 프레임워크는 첫 페이지 로드 시 기본 서버 렌더링을 추가하여 이 성능 문제를 완화하려고 시도합니다. 이는 개선된 방법이지만 웹사이트가 여러 방식과 여러 환경(서버, 브라우저)에서 렌더링될 수 있기 때문에 새로운 복잡성을 초래합니다. 또한 사이트가 로드된 것처럼 보이지만 애플리케이션 자바스크립트 로직이 백그라운드에서 계속 로드되고 있기 때문에 응답하지 않는 새로운 '언캐니 밸리' 문제가 발생합니다.

MPA는 원격 서버에서 모든 HTML을 렌더링하므로 실행에 필요한 자바스크립트가 많지 않은 경우가 많습니다. 따라서 MPA는 SPA보다 훨씬 빠른 첫 로드 환경을 제공하며, 이는 콘텐츠 중심 웹사이트에 필수적입니다. 하지만 향후 페이지 네비게이팅 시 로컬 렌더링의 이점을 누릴 수 없으므로 첫 페이지 로딩 이후에는 오래 지속되는 사용자 경험의 이점을 누릴 수 없다는 단점이 있습니다.


#### 서버 라우팅 (MPA) vs. 클라이언트 라우팅 (SPA)

여러분의 웹사이트의 라우팅 로직은 어디에 위치하나요? MPA에서는 서버에 대한 모든 요청이 어떤 HTML로 응답할지 결정하므로 라우팅 로직이 서버에 존재합니다. SPA에서는 라우팅 로직이 브라우저에서 로컬로 실행되며 모든 네비게이팅을 가로채서 서버에 접속하지 않고 새 페이지를 렌더링합니다.

이는 위에서 설명한 것과 비슷한 장단점이 있습니다: MPA는 첫 번째 로딩 경험이 더 빠른 반면, SPA는 자바스크립트 애플리케이션이 브라우저에 완전히 로드된 후 두 번째 또는 세 번째 페이지 로딩이 더 빠를 수 있습니다. 

또한 SPA는 페이지 렌더링에 대해 많은 부분을 제어하기 때문에 페이지 네비게이팅 전반에 걸쳐 더욱 강력한 전환을 제공할 수 있습니다. 이러한 지원을 위해 MPA는 브라우저에서 네비게이팅을 제어하여 클라이언트 라우팅을 모방하는 Hotwire의 [Turbo](https://turbo.hotwired.dev/)와 같은 도구를 활용합니다. HTML은 여전히 서버에서 렌더링되지만 Turbo는 이제 SPA의 클라이언트 라우팅과 유사하게 페이지 간 원활한 전환을 표시할 수 있습니다.

#### 서버에서의 상태 관리 (MPA) vs. 클라이언트에서의 상태 관리 (SPA)

SPA는 복잡한 다중 페이지 상태 관리를 처리하는 웹사이트(예: Gmail)를 위한 우수한 아키텍처입니다. SPA는 전체 웹사이트를 단일 JavaScript 애플리케이션으로 실행하므로 애플리케이션이 여러 페이지에 걸쳐 상태와 메모리를 유지할 수 있기 때문입니다. 받은 편지함 및 관리 대시보드와 같은 대화형 데이터 기반 환경은 웹사이트 자체가 본질적으로 '앱'과 유사하기 때문에 SPA에 적합합니다.


## MPA는 SPA보다 나은가요?

MPA와 SPA를 비교할 때 "더 나은" 또는 "더 나쁜" 선택은 없습니다. 모든 것은 장단점에 달려 있습니다.

**Astro는 콘텐츠 중심 웹사이트의 사용 사례에 가장 적합하기 때문에 MPA의 성능과 단순성을 우선시합니다.** 상태 저장 및 상호 작용이 많은 웹사이트는 첫 로드 성능이 저하되는 대신 SPA가 제공하는 앱과 유사한 아키텍처를 통해 더 많은 이점을 얻을 수 있습니다.

:::note[접근성]
MPA는 내비게이션에 HTMl 표준 태그인 `<a>` 요소를 사용합니다. 이를 통해 포커스 상태 관리 및 경로 변경 알림과 같은 중요한 접근성 기능을 기본적으로 제공합니다.
:::

## 사례 연구

아래는 저희가 알고 있는 모든 공개 Astro 비교 결과들입니다.

- [Astro vs. SPA (Next.js)](https://twitter.com/t3dotgg/status/1437195415439360003) - 94% 더 적은 JavaScript
- [Astro vs. SPA (Next.js)](https://twitter.com/jlengstorf/status/1442707241627385860?lang=en) - 34% 더 빠른 로딩
- [Astro vs. SPA (Next.js)](https://vanntile.com/blog/next-to-astro) - 65% 더 적은 네트워크 사용량
- [Astro vs. SPA (Remix, SvelteKit)](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8163s) - "[Lighthouse 점수]가 믿을 수 없을 정도로 놀랍다."
- [Astro vs. Qwik](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8504s) - 43% 더 빠른 [TTI](https://web.dev/tti/)


또다른 마이그레이션이나 벤치마크 사례를 알고 있지만 여기에 없는 경우 PR을 만들어 추가해 주세요.

## 더 알아보기

자세한 내용을 알고 싶으시다면 Surma(Google)와 Jake Archibald(Google)가 만든 [이 주제에 대한 훌륭한 영상](https://www.youtube.com/watch?v=ivLhf3hq7eM)을 참고해 보세요.

